<template>
	<view class="main">
		<view class="form">
			<view class="import-item">
				<view class="label">
					用户名
				</view>
				<view class="">
					<input class="uni-input" v-model="nickname" placeholder="请填写用户名" />
				</view>
			</view>
			<view class="import-item">
				<view class="label">
					简介
				</view>
				<view class="">
					<input class="uni-input" v-model="bio" placeholder="请简单介绍下自己" />
				</view>
			</view>
			<view class="head">
				头像：

			</view>
			<image v-if="imageUrl" class="headerImg" :src="imageUrl" @click="chooseFile" mode=""></image>
			<view v-else class="upload" @click="chooseFile">
				<image class="add" src="../../static/add.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="other">

		</view>
		<view class="title">
			驾照类型
		</view>
		<view class="type">
			<view class="item" :class="car_type ==0?'ed':''" @click="selectHandle(0)">
				<image v-if="car_type == 0" class="icon" src="../../static/cart1_ed.png" mode="widthFix"></image>
				<image v-else class="icon" src="../../static/cart1_not.png" mode="widthFix"></image>
				<view class="name">
					小车
				</view>
				<view class="name">
					C1/C2/C3
				</view>
				<image v-if="car_type == 0" class="selected" src="../../static/bg-selected.png" mode="widthFix"></image>
			</view>
			<view class="item" :class="car_type ==1?'ed':''" @click="selectHandle(1)">

				<image v-if="car_type == 1" class="icon" src="../../static/cart2_ed.png" mode="widthFix"></image>
				<image v-else class="icon" src="../../static/cart2_not.png" mode="widthFix"></image>
				<view class="name">
					货车
				</view>
				<view class="name">
					A2/B2
				</view>
				<image v-if="car_type == 1" class="selected" src="../../static/bg-selected.png" mode="widthFix"></image>
			</view>
			<view class="item" :class="car_type ==2?'ed':''" @click="selectHandle(2)">
				<image v-if="car_type == 2" class="icon" src="../../static/cart3_ed.png" mode="widthFix"></image>
				<image v-else class="icon" src="../../static/cart3_not.png" mode="widthFix"></image>

				<view class="name">
					客车
				</view>
				<view class="name">
					A1/A3/B1
				</view>
				<image v-if="car_type == 2" class="selected" src="../../static/bg-selected.png" mode="widthFix"></image>
			</view>
			<view class="item" :class="car_type ==3?'ed':''" @click="selectHandle(3)">
				<image v-if="car_type == 3" class="icon" src="../../static/cart4_ed.png" mode="widthFix"></image>
				<image v-else class="icon" src="../../static/cart4_not.png" mode="widthFix"></image>

				<view class="name">
					摩托车
				</view>
				<view class="name">
					D/E/F
				</view>
				<image v-if="car_type == 3" class="selected" src="../../static/bg-selected.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="btn">
			<u-button type="primary" @click="confirmUserinfo">提交</u-button>
		</view>

	</view>
</template>

<script>
	import {
		editUserInfo,
		upload,
		userinfo
	} from "@/api/index.js"
	export default {
		data() {
			return {
				mobile: '',
				code: "",
				action: '',
				fileList: [],
				car_type: 0,
				imageUrl: '',
				bio: "",
				nickname: '',
				userinfo: {
					nickname: "",
					avatar: "",
					bio: ''
				}
			};
		},
		mounted() {
			userinfo().then(res => {
				this.imageUrl = res.data.avatar
				this.bio = res.data.bio
				this.nickname = res.data.nickname
				this.car_type = res.data.car_type
				uni.setStorageSync("userInfo", res.data)
			})
		},
		methods: {
			//提交信息
			confirmUserinfo() {
				let params = {
					nickname: this.nickname,
					car_type: this.car_type,
					avatar: this.imageUrl,
					bio: this.bio,
					apply: 0,
					city_id: 0
				}
				editUserInfo(params).then(res => {
					if (res.code == 1) {
						uni.navigateBack(-1)
					}
				})
			},
			//选择图片
			chooseFile() {
				let that = this
				uni.chooseFile({
					count: 1, // 选择文件的数量
					type: 'image', // 文件类型，all 表示所有类型
					success: function(res) {
						const tempFilePaths = res.tempFilePaths; // 获取文件的本地临时文件路径
						// 上传文件
						that.uploadFile(tempFilePaths[0]);
					}
				});
			},

			uploadFile(filePath) {
				let token = uni.getStorageSync("token")
				const formData = {
					src: filePath
				};
				uni.uploadFile({
					url: 'http://www.lingjiamao.cn/questions/uploadfile', // 仅为示例，并非真实的接口地址
					filePath: filePath,
					name: 'file', // 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
					formData: formData,
					header: {
						'token': token
					},
					success: (uploadRes) => {
						console.log(uploadRes)
						this.imageUrl = JSON.parse(uploadRes.data).code.fullurl
					},
					fail: (err) => {
						console.error('上传失败：', err);
					}
				});
			},
			selectHandle(type) {
				this.car_type = type
			}
		}
	}
</script>

<style lang="scss">
	.main {
		background-color: #fff;

		.upload {
			border-radius: 10px;
			border: 1px solid #ccc;
			width: 140rpx;
			height: 140rpx;
			justify-content: center;
			display: flex;
			align-items: center;
			margin-left: 20rpx;
			margin-bottom: 40rpx;
		}

		.head {
			padding: 26rpx;
			font-size: 28rpx;
		}

		.title {
			font-size: 26rpx;
			color: #333;
			padding-left: 26rpx;
		}

		.type {
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			justify-content: space-around;

			.item {
				width: 160rpx;
				height: 160rpx;
				text-align: center;
				cursor: pointer;
				border: 1px solid #ccc;
				color: #515151;
				border-radius: 10rpx;
				padding-top: 6rpx;
				position: relative;

				.selected {
					width: 40rpx;
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}

			.ed {
				color: #1296db;
				border-color: #1296db;
			}

			.icon {
				width: 60rpx;
			}

			.name {
				font-size: 26rpx;

			}
		}
	}

	.btn {
		width: 100;
		margin-top: 10px;
		padding: 0 26rpx;
	}

	.import-item {
		padding: 14rpx 26rpx;
		border-bottom: 1px solid #e4e7ed;
		display: flex;
		align-items: center;

		.label {
			width: 140rpx;

			font-size: 26rpx;
		}

		.uni-input {
			font-size: 26rpx;
		}
	}

	.headerImg {
		width: 140rpx;
		height: 140rpx;
		border-radius: 100%;
		margin-left: 20rpx;
		margin-bottom: 40rpx;
	}

	.add {
		width: 60rpx;
		height: 60rpx;

	}
</style>